
<template>
    <div class="EventDetails">
        <div class="topBg">
            <x-img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585215767558&di=d658d3ac5cbc9aa49f6bdee21c59a5d6&imgtype=0&src=http%3A%2F%2Fent.k618.cn%2Fylzx%2F201612%2FW020161231691371482636.jpeg" class="img"></x-img>
            <p class="title">微信分会第38次早会</p>
              <div class="bottomView"> 
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg" class="itemIcon"/>
                    <sapn style="font-size:14px;vertical-align: top;color:rgb(139,140,141)">8月7日09:50-8月7日09:50</sapn>
                    <div class="rightView">
                        <p class="sinUp">可报名</p>
                        <div class="exp">
                            <img src="" class="navIcon">
                            <span class="navTitle">导航</span>
                        </div>
                    </div>
              </div>
              <p style="font-size:14px;color:rgb(139,140,141);margin-left: 15px;">地址：落户香格里拉酒店8层</p>
        </div>
        <div style="margin-top:10px; background-color:white">
            <tab active-color="#D3A042">
            <tab-item selected @on-item-click="onItemClick(1)"  >介绍</tab-item>
            <tab-item @on-item-click="onItemClick(2)">报名情况（45人）</tab-item>
            <tab-item @on-item-click="onItemClick(3)">现场照片</tab-item>
            
        </tab> 
        </div>
        <div v-show="showTab == 1" class="tabBg">1</div>
        <div v-show="showTab == 2" class="tabBg">
            <div class="apply">
                <div class="applyHeader">
                    <flexbox>
                        <flexbox-item><div class="flex-demo">报名时间</div></flexbox-item>
                        <flexbox-item><div class="flex-demo">头像名称</div></flexbox-item>
                        <flexbox-item><div class="flex-demo">代表行业</div></flexbox-item>
                    </flexbox>
                </div>
                <div class="cell">
                    <flexbox>
                        <flexbox-item><div class="flex-cell">8月7日09:50</div></flexbox-item>
                        <flexbox-item><div class="flex-cell">
                            <!-- <div class="round"></div>s -->
                            <img src="" class="round">
                            <span class="nameSpan" >刘德华</span>
                            </div></flexbox-item>
                        <flexbox-item><div class="flex-cell">软件开发</div></flexbox-item>
                    </flexbox>
                </div>
                <div class="cell">
                    <flexbox>
                        <flexbox-item><div class="flex-cell">8月7日09:50</div></flexbox-item>
                        <flexbox-item><div class="flex-cell">
                            <!-- <div class="round"></div>s -->
                            <img src="" class="round">
                            <span class="nameSpan" >刘德华</span>
                            </div></flexbox-item>
                        <flexbox-item><div class="flex-cell">软件开发</div></flexbox-item>
                    </flexbox>
                </div>
            </div>
            

        </div>
        <div v-show="showTab == 3" class="tabBg">3</div>
        <div class="btnBottomBg">
            <p class="sinUpButton">报  名</p>
        </div>
    </div>
    
</template>
<script>
import { XImg } from 'vux'
import { Tab , TabItem} from 'vux'
import { Flexbox, FlexboxItem, Divider } from 'vux'

export default {    
  name: 'EventDetails',
  data () {
    return {
        showTab: 1

    }
  },
  components: {
    XImg,
    Tab,
    TabItem,
    Flexbox,
    FlexboxItem,
    Divider
},
  methods: {
    onItemClick (index) {
        this.showTab = index
        
    //   console.log('on item click:', index)
    },
    
}
   
}
</script>

<style scoped>
/* @import '~vux/src/styles/1px.less'; */

    .topBg {
        width: 100%;
        height: 330px;
        background-color: white;

    }
    .img {
        width: 95%;
        height: 200px;
        padding: 10px;
        border-radius: 5px;

    }
    .title {
        font-size: 18px;
        margin-left: 15px;

        
    }
     .bottomView {
        /* height: 20px; */
        width: 100%;
        /* display: flex; */
        margin-top: 5px;
        /* flex-direction: row; */
    }
    .itemIcon {
        margin-left: 15px;
        height: 20px;
        width: 20px;
        /* padding-bottom: 10px; */
    }
    .sinUp {
      background-color: rgb(238, 194, 109);
      width: 65px;
      height: 20px;
      font-size: 14px;
      margin-left: 10px;
      color: white;
      text-align:center;
      display: inline-block;
      border-radius: 10px;
      margin-right: 10px;
  }
  .sinUpButton {
    background-color: rgb(238, 194, 109);
    width: 80%;
    height: 40px;
    color: white;
    text-align:center;
    display: inline-block;
    line-height: 40px;
    border-radius: 5px;
    margin-top: 20px;
  }
  .rightView {
      float: right;
  }
  /* .navigationBg {
    width: 65px;
    height: 20px;
    border:3px;
    border-radius: 3px;
    border-color: rgb(238, 194, 109);
  } */
  .exp { 
      margin-top: 5px;
      width:55px;
      margin: 10px auto 0px;
      text-align: center;
      border:1px solid rgb(238, 194, 109);
      border-radius: 3px;
  }
  .navIcon {
      width: 15px;
      height: 15px;
      background-color: yellow;
      
  }
  .navTitle {
    font-size: 13px;
    vertical-align: top;
    color: rgb(238, 194, 109);
  } 
  .btnBottomBg {
    /* width: 80%; */
    height: 100px;
    background-color: white;
    position: fixed;
    bottom:0px;
    width: 100%;
    text-align: center;
  }
  .applyHeader {
    width: 100%;
    height: 40px;
    flex: 1;
    background-color: rgb(242, 243, 244);
  }
  .headerTitle {
    width:60px;
    height:60px
  }
  .flex-demo {
    text-align: center;
    color: rgb(171, 172, 173);
    line-height: 40px;
    border-radius: 4px;
    font-size: 16px;
    background-clip: padding-box;
  }
  .cell {
    width: 100%;
    font-size: 13px;
    height: 40px;
    background-color: white;
  }
  .round {
    background-color: rgb(171, 172, 173);
    width: 20px;
    height: 20px;
    border-radius: 10px;
    margin-top: 10px;
    vertical-align: center;

  }
   .flex-cell {
    
    text-align: center;
    color: rgb(171, 172, 173);

    line-height: 30px;
    /* background-clip: padding-box; */
  }
  .nameSpan {
        /* vertical-align: center; */
        /* margin-top: -1px;s */
  }
</style>